<template>

    <div class="recommend_you">
        <van-nav-bar style="position: fixed; width: 100%;" title="每日推荐" left-text="返回" right-text="" left-arrow @click-left="jumpTo"
        />
        <div class="recommend_you_list">
            <ul>

                <li v-for="(item, index) in myarr" :key="index">
                    <div @click="toread(myarr[index].id,myarr[index].title,myarr[index].cover)" class="img_left">
                        <img :src="myarr[index].cover" alt="">
                    </div>
                    <div class="img_right">
                        <span class="book_name">{{ myarr[index].title }}</span>
                        <button class="look_book_btn" @click="toread(myarr[index].id,myarr[index].title,myarr[index].cover)">查看图书</button>
                        <br>
                        <span class="author">{{ myarr[index].author }}</span>
                        <br>
                        <div class="book_article">
                        {{ myarr[index].content }}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<style>
.van-nav-bar__text {
    color: #000000;
}
.van-nav-bar .van-icon {
    color: #000000;
}
</style>
<style lang="less" scoped>
@import '../pubilc1/public.less';

.recommend_you {
    color: @font_color;
    height: 100vh;
    width: 100vw;
    overflow: scroll;

    .recommend_you_title {
        position: fixed;
        width: 100vw;
        top: 0;
        background-color: rgb(255, 255, 255);
        border-bottom: 1px solid rgb(255, 252, 194);
        height: 5vh;
        line-height: 5vh;
        z-index: 100;

        .recommend_you_title_center {
            line-height: 5vh;
            color: rgb(0, 0, 0);
            font-size: 12px;
            font-family: '宋体';
            font-family: @font_family;
            align-items: center;
        }

        .recommend_you_title_left {
            line-height: 4vh;
            font-size: 24px;
            left: 10px;
            float: left;
            // display: inline-block;
            position: relative;
            color: rgb(0, 0, 0);
            background-color: transparent;
            padding: 0;
            border: 0;
        }
    }

    .recommend_you_list {
        margin-top: 60px;
        margin-bottom: 60px;
        display: block;
        position: relative;
        width: 100vw;
        overflow: hidden;
        ul {
            text-align: left;
            li {
                margin:13px 10px;
                width: 100vw;
                left: 0;
                padding: 0;
                position: relative;
                display: block;
                border-bottom: #ffce6c solid 1px;

                .img_left {
                    display: inline-block;

                    img {
                        object-fit: cover;
                        width: 90px;
                        height: 135px;
                    }
                }

                .img_right {
                    display: inline-block;
                    width: 70vw;
                    margin-left: 10px;
                    color: #000;

                    .look_book_btn {
                        display: inline;
                        position: relative;
                        margin-left: 2vw;
                        line-height: 35px;
                        width: 80px;
                        height: 30px;
                        padding: 0;
                        font-size: 12px;
                        line-height: 12px;
                        border: 0;
                        background-color: rgb(255, 186, 122);
                        border-radius: 5px;
                        top: 0;
                        color: white;
                    }

                    .book_name {
                        line-height: 35px;
                        font-size: 14px;
                        width: 160px;
                        text-overflow: ellipsis;
                        display: inline-flex;
                        position: relative;
                        left: 0;
                        font-weight: bold;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .author {
                        display: block;
                        font-size: 12px;
                        width: 80px;
                        color: #9e9e9e;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .book_article {
                        width: 60vw;
                        display: block;
                        height: 36px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size: 12px;
                        font-family: "黑体";
                        color: #636363;
                    }
                }
            }
        }
    }
}
</style>

<script>
// import { create } from "core-js/core/object";
// 导入排行榜接口
import {rankList} from "../api/myindex";

// 时间
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}${month}${day}`;
}
const today = new Date();
const formattedToday = formatDate(today);
console.log(formattedToday);

export default {
    data() {
        return {
            myarr:[],
            arr: {
                id: [],
                book_names: [],
                book_bg:[],
                author: [],
                article: [],
            }
        }
    },
    // mounted() {
    //     this.fetchData();
    // },
    methods: {
        jumpTo() {
            this.$router.push({ path: this.url });
        },
        toread(myid,bookname,mybg) {
            this.$router.push({ path: this.url2 ,query: { 
                id:myid,
                name:bookname,
                bg:mybg
            }});
        },
        // fetchData() {
        //     // 设置加载状态
        //     this.loading = true;
        //     axios.get('https://apis.netstart.cn/daodu/lessons', {
        //         params: {
        //             form: 20230901,
        //             to: formattedToday,
        //         }
        //     })
        //         // 成功
        //         .then(require => {
        //             // 渲染数据

        //             // console.log(require.data[0].id);
        //             for (let i = 0; i < 30; i++) {
        //                 this.arr.author.push(require.data[i].author.name);
        //                 this.arr.id.push(require.data[i].author.id);
        //                 this.arr.article.push(require.data[i].article);
        //                 this.arr.book_names.push(require.data[i].provenance);
        //             }
        //             console.log(require.data);
        //             // document.querySelector(".author").innerText = this.arr.author[0];
        //             this.loading = false;
        //         })
        //         // 失败
        //         .catch(error => {
        //             console.log(error);
        //             this.loading = false;
        //         })
        // }
        // 初始化  

         async getmydata() {
            // 调用接口
            await rankList({ 
            rankType: "26",
            uuid:"ca03da7b64ca443ab25ec3b662fa91e2",
            all:"0" 
          })
                .then(
                    // 请求成功
                    content => {
                        // 后台的数据
                        console.log("---content>",content)
                        if (content) {
                            // 映射新数组
                            this.myarr = content.list;
                            console.log("myarr-->",this.myarr);
                            // // 定义对象 (整合数据)
                            // // 进行赋值（响应式）

                        }
                    }
                )
                .catch(
                    // 请求失败
                    console.log("321"),
                    err => {
                        console.log("请求失败,请刷新", err);
                    }
                )
        },
 

    },
    created() {
         // 在初始化的时候 获取编辑推荐
        this.getmydata();
        },
    // 自定义属性接收父组件传递的值
    props: {
        url: {
            type: String,
            default: '/'
        },
        url2: {
            type: String,
            default: '/Read'
        }
    },

}
</script>